<template>
    <div class="table-body-container layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">
            <div class="flow-leave-search mb15">
                        <el-input v-model="state.tableData.param.reason" placeholder="请输入请假原因" class="ml10 search-input" clearable></el-input>
                        <el-select v-model="state.tableData.param.flowStatus" placeholder="请选择流程状态" class="ml10 search-input" clearable>
                            <el-option
                                    v-for="dict in flow_status"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                            />
                        </el-select>
                <el-button icon="Search" size="default" @click="getTableData" type="primary" class="ml10">
                    查询
                </el-button>
                    <el-button icon="DocumentAdd" v-auth="'flow:leave:add'" size="default" type="success" class="ml10" @click="onOpenAdd(state.add)">
                        新增
                    </el-button>
            </div>
            <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
                <el-table-column prop="reason" label="请假原因" show-overflow-tooltip></el-table-column>
                <el-table-column prop="startTime" label="开始时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="endTime" label="结束时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="day" label="请假天数" show-overflow-tooltip></el-table-column>
                <el-table-column prop="instanceId" label="流程实例的id" show-overflow-tooltip></el-table-column>
                <el-table-column prop="nodeCode" label="节点编码" show-overflow-tooltip></el-table-column>
                <el-table-column prop="nodeName" label="流程节点名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="nodeType" label="节点类型" :formatter="(row:any)=>{return proxy.selectDictLabel(node_type,row.nodeType)}" show-overflow-tooltip></el-table-column>
                <el-table-column prop="flowStatus" label="流程状态" :formatter="(row:any)=>{return proxy.selectDictLabel(flow_status,row.flowStatus)}" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="100">
                    <template #default="scope">
                        <el-tooltip v-auth="'flow:leave:update'" content="修改" placement="top">
                            <el-button link v-if="scope.row.nodeCode === '2'" icon="Edit" size="small" text type="primary" @click="onOpenEdit(state.edit, scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip v-auth="'flow:leave:delete'" content="删除" placement="top">
                            <el-button link v-if="scope.row.nodeCode === '2'"icon="Delete" size="small" text type="primary" @click="onRowDel(scope.row)"></el-button>
                        </el-tooltip>
                        <el-button link v-if="scope.row.nodeCode === '2'" size="small" text type="primary" @click="showSubmitForm(scope.row)">提交审批</el-button>
                        <el-button link v-if="scope.row.nodeType !== 2" size="small" text type="primary" @click="revoke(scope.row)">撤销</el-button>
                        <el-button link v-if="scope.row.nodeType !== 2" size="small" text type="primary" @click="taskBackByInsId(scope.row)">拿回</el-button>
                        <el-button link v-if="scope.row.nodeType !== 2" size="small" text type="primary" @click="termination(scope.row)">终止</el-button>
                        <el-button link size="small" text type="primary" @click="toFlowImage(scope.row.instanceId)">流程图</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                    v-show="state.tableData.total>0"
                    :total="state.tableData.total"
                    v-model:page="state.tableData.param.current"
                    v-model:limit="state.tableData.param.size"
                    @pagination="getTableData"
            />
        </el-card>
        <LeaveDialog ref="leaveDialogRef" @refresh="getTableData()"
                :nodetype-dict="node_type"
                :flowstatus-dict="flow_status"
                :user-data="state.userOptions"
        />
        <el-dialog title="流程图" width="70%" v-model="state.flowChart" append-to-body>
            <WarmChart :insId="state.insId"></WarmChart>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="flowLeave">
    import { leaveApi } from '/@/api/biz/flow/leave';
    import constConfig from '/@/utils/constConfig';
    import { userApi } from '/@/api/system/user';

    // 引入组件
    const LeaveDialog = defineAsyncComponent(() => import('/@/views/biz/flow/leave/dialog.vue'));
    const WarmChart = defineAsyncComponent(() => import('/@/views/flow/definition/warm_chart.vue'));

    // 定义变量内容
    const { proxy } = <any>getCurrentInstance();
    const { node_type,flow_status } = proxy.useDict('node_type','flow_status');
    const leaveDialogRef = ref();
    const state = reactive({
        tableData: {
            data: [],
            total: 0,
            loading: false,
            param: {
                type: null,
                reason: null,
                startTime: null,
                endTime: null,
                day: null,
                instanceId: null,
                nodeCode: null,
                nodeName: null,
                nodeType: null,
                flowStatus: null,
                ...constConfig.pageModel,
            },
        },
        formData: {
            type: null,
            reason: null,
            startTime: null,
            endTime: null,
            day: null,
            instanceId: null,
            nodeCode: null,
            nodeName: null,
            nodeType: null,
            flowStatus: null,
        },
        userOptions: [],
        insId: '',
        flowChart: false,
        ...constConfig.dialogType
    });

    // 初始化表格数据
    const getTableData = () => {
        state.tableData.loading = true;
        leaveApi().page(state.tableData.param).then(res=>{
            state.tableData.data = res.data.records??[];
            state.tableData.total = res.data.total;
            state.tableData.loading = false;
        })
    };
    // 打开新增字典弹窗
    const onOpenAdd = (type: string) => {
        let row = JSON.parse(JSON.stringify(state.formData));
        leaveDialogRef.value.openDialog(type, row);
    };
    // 打开修改字典弹窗
    const onOpenEdit = (type: string, row: LeaveType) => {
        row = JSON.parse(JSON.stringify(row))
        leaveDialogRef.value.openDialog(type, row);
    };
    // 删除字典
    const onRowDel = (row: LeaveType) => {
        ElMessageBox.confirm(`${constConfig.delString.tip1 + row.reason + constConfig.delString.tip2}`, '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            leaveApi().del(row.id).then(() => {
                getTableData();
            })
        })
            .catch(() => {});
    };
    const getUser = () => {
      userApi().getList(null).then(response => {
        state.userOptions = response.data.map((item:any) =>{
              return {
                value: item.id,
                label: item.nickName
              }
            })
      });
    }
    const showSubmitForm = (row:any) => {
        row = JSON.parse(JSON.stringify(row))
        leaveDialogRef.value.openDialog(constConfig.dialogType.approval, row);
    }
    const revoke = (row:any) => {
      leaveApi().revoke(row.id).then(response => {
        proxy.modal.msgSuccess("撤销成功");
        getTableData();
      });
    }
    const taskBackByInsId = (row:any) => {
      leaveApi().taskBackByInsId(row.id).then(response => {
        proxy.modal.msgSuccess("拿回成功");
        getTableData();
      })
    }
    const termination = (row:any) => {
      leaveApi().termination(row).then(() => {
        proxy.modal.msgSuccess("终止成功");
        getTableData();
      })
    }
    const toFlowImage = (instanceId:string) => {
      state.insId = instanceId;
      state.flowChart = true
    }
    // 页面加载时
    onMounted(() => {
        getTableData();
        getUser();
    });
</script>
<style scoped lang="scss">
.table-body-container {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;
        .el-table {
            flex: 1;
        }
    }
}
</style>